<script setup lang="ts">
import { useRouter } from 'vue-router'

const BASE_PATH = import.meta.env.VITE_API_BASE_PATH
const router = useRouter()


// 游戏相关路由
const onPlayWithPlayer = () => {
  router.push({ path: BASE_PATH + '/', query: { model: 'player' } })
}
const onPlayWithAI = () => {
  router.push({ path: BASE_PATH + '/', query: { model: 'AI' } })
}
const onPlayOnline = () => {
  router.push({ path: BASE_PATH + '/center' })
}
const settings = () => {
  router.push({ path: BASE_PATH + '/settings' })
}


</script>

<template>
  <!-- 原有游戏按钮 -->
  <t-space class="begin-button-box" direction="vertical" align="center">
    <t-button block variant="base" size="large" :onclick="onPlayWithPlayer">人 人 对 战</t-button>
    <t-button block variant="outline" size="large" :onclick="onPlayWithAI">人 机 对 战</t-button>
    <t-button block variant="outline" size="large" :onclick="onPlayOnline">在 线 对 战</t-button>
    <t-button block variant="outline" size="large" :onclick="settings">设 置</t-button>
  </t-space>

  <!-- 备案信息 -->
  <div class="beian-info">
    <a href="https://beian.miit.gov.cn/" target="_blank" class="beian-link">粤ICP备2024302719号</a><br>
    <span class="copyright-text">Copyright © dancehole & cyanbleeze @2024-2025 ALL RIGHTS RESERVED</span>
  </div>
</template>

<style scoped>
.begin-button-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* 备案信息样式 */
.beian-info {
  font-size: small;
  color: dimgrey;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.beian-link {
  color: dimgrey;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-right: 8px;
}

.beian-link:hover {
  color: #666;
  text-decoration: underline;
}

.copyright-text {
  color: dimgrey;
  font-size: 11px;
  opacity: 0.8;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .beian-info {
    font-size: 10px;
    padding: 8px 0;
  }

  .copyright-text {
    display: block;
    margin-top: 4px;
  }
  
  .user-name {
    display: none;
  }
  
  .user-info {
    padding: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  }
}
</style>